<template>
  <el-container class="allpage">
      <el-row class="position-fixed">
      </el-row>
    <el-container>
      <el-aside class="shaoboaside1">
        <div class="shaoaside-content">
        <div class="shaoaside-left">
          <div>
            <div class="yupaozuoce">
          <el-row :gutter="10">
            <el-col :span="8"><el-button type="primary"  plain @click="centerDialogVisible = true"  class="add_btn2" >输入手牌号</el-button></el-col>
            <el-col :span="6"><el-button type="primary"  plain @click="check"  class="add_btn2" >查询浴袍</el-button></el-col>
          </el-row>

          <el-row >
            <el-col :span="5">
              <div style="display: block;">
                <span  style="display: block; margin-top: 24px;"class="m1">手牌号:</span>
              </div>
            </el-col>
            <el-col :span="6">
              <el-input
                class="input"
                v-model="this.handbrandnumber"
                :disabled = "true"
                style="width: 100px; height: 40px;margin-left: -25px"
              ></el-input>
            </el-col>
          </el-row>
          </div>
          </div>
<!--          展示商品表格-->
          <div class="yupaoscroll">
            <el-table
              :row-style="rowStyle"
              :cell-class-name="tableRowClassName"
              :show-header="false"
              :data="detailsList"
              empty-text = "玉泉宫"
              height="577"
              style="width: 1150px"
              class="listtable">
              <el-table-column
                prop="entryName"
                label="商品名称"
                width="180" align="center">
              </el-table-column>
              <el-table-column
                prop="quantity"
                label="购买数量" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.quantity }}个</div>
                </template>
              </el-table-column>
              <el-table-column
                sortable
                label="消费金额" align="center">
                <template slot-scope="scope">
                  <div >{{ scope.row.totalAmount }}元</div>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-button type="warning" plain @click="jianshao(scope.row.index)">减少</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button class="yupaoleibie" type="primary" plain  @click="table= true;getbataiList()">确认</el-button>
          <el-button class="yupaoleibie" type="primary"  plain  @click.prevent.stop.native="reback">清空</el-button>
          </div>
<!--分类条-->
        <div class="shaoaside-right">
          <div>
            <div class="zhonglei">
            <el-card class="first" style="font-size: 18px">
              <span class="juzhong">浴袍</span>
            </el-card>
            </div>
          </div>
        </div>
        </div>
      </el-aside>
<!--      商品展示-->
      <el-container>
        <el-main class="shaomain">
          <div
               v-loading="loading">
            <el-row
              class="button-list2"
              v-for="rows in branchData"
            >
              <el-col v-for="cols in rows" :span="4">
                <el-button plain
                           style="height: 123px;width: 170px;margin-top: 3px;padding: 0;"
                           type="primary"
                           class="yupaobutton1"
                           @click.prevent.stop.native="handleAdddetail(cols.id)"
                >
                  <div>{{cols.entryName}}</div>
                  <div>{{cols.unitPrice}}元</div>
                </el-button>
              </el-col>
            </el-row>
          </div>
          <!--          软键盘-->
          <el-dialog :visible.sync="centerDialogVisible"   width="90%"  :showClose="false"    center>
            <el-card class="shaocard">
              <div class="el-dialog-div">
                <Verify @comfirm="hao" :inputName="this.handbrandnumber"></Verify>
              </div >
            </el-card>
          </el-dialog>
<!--          抽屉-->
          <el-drawer
            style="font-size: 40px;text-align: center"
            title="请仔细核对订单"
            :visible.sync="table"
            direction="ltr"
            size="60%">
            <el-table :data="detailsList":header-cell-style="{textAlign:'center',fontSize: '19px',background:'#eef1f6',color:'#606266'}"
                      :cell-style="{textAlign: 'center'}" height="600" class="yupaoaa"
                      empty-text = "玉泉宫" :show-header="false">
              <el-table-column property="handBrand"  label="手牌号" width="250px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px">{{ scope.row.index+1 }}</div>
                </template>
              </el-table-column>
              <el-table-column property="entryName" label="商品名称" width="250px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px">{{ scope.row.entryName }}</div>
                </template>
              </el-table-column>
              <el-table-column property="quantity" label="数量" width="250px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px" >{{ scope.row.quantity }}个</div>
                </template>
              </el-table-column>
              <el-table-column property="totalAmount" label="合计金额" width="250px">
                <template slot-scope="scope">
                  <div  style="margin-top: 3px" >{{ scope.row.totalAmount }}元</div>
                </template>
              </el-table-column>

            </el-table>
            <div class="container">
            <el-button style="float: left" class="add_btn3" type="success" plain @click="addFormm">提交</el-button>
            </div>
          </el-drawer>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
  import { listDetails, getDetails, delDetails, addDetails, updateDetails } from "@/api/module/shao/details";
  import { listProject, getProject, delProject, addProject, updateProject } from "@/api/module/shao/project";
  import { listHands, gethands, delHands, addHands, updateHands } from "@/api/module/shao/hands";
  import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/module/shao/baseinfo";
  import { listBills, getBills, delBills, addBills, updateBills,ppp } from "@/api/module/shao/bills";
  import Verify from "./Verify.vue";
export default {
  props: ['passvalue'],
  name: "App",
  components: {
    Verify
  },
  data() {
    return {
      num: 1,
      centerDialogVisible: false,
      handbrandnumber:'',
      //软键盘
      active: null,
      show: false,
      index:'',
      NUM: "",
      A:"",
      i:'',
      result: [],
      input: "",
      inputhand:"",
      drawer: false,
      table: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      // 吧台账单表格数据
      billsList: [],
      // 商品数据
      projectList:[],
      branchData:[],
      branchData1:[],
      goodsList:[],
      //人员信息表数据
      personList:[],
      //手牌表数据
      handsList:[],
      //展示已点
      List1: {
        entryName: null,
        quantity:null,
        handBrand: null,
        handCategory: null,
        handState: null,
        lockedState: null,
        //库中数据字段为1才是商品
        projectCategory:null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 弹出层标题
      title: "",
      //查询项目信息表参数
      projectinformations:{
        pageNum: 1,
        pageSize: 1000,
        entryName: null,
        //库中数据字段为1才是商品
        projectCategory:null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: '40101',
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      loading:false,

      batai: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      form2:{},
      // 手牌表查询参数
      hands: {
        pageNum: 1,
        pageSize: 10,
        handBrand: null,
        handCategory: null,
        handState: null,
        lockedState: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.$route.query.NUM='';
    this.getprojectList();
  },
  mounted () {
    this.getRow();
  },
  methods: {
    hao(k){
      this.handbrandnumber=k;
      this.gethandList();
      this.centerDialogVisible=false;
    },
    // 获取点击行的索引
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    rowStyle(row, rowIndex){
      if (this.currentRowId === row.id) {
        // 此处返回选中行的样式对象，按需设置
        return {
          'background-color': 'rgba(94,180,251,0.18)',
          'color': 'rgb(47,46,46)'
        }
      }
    },
    //减少商品数量
    jianshao(index){
      this.detailsList[index].quantity-=1;
      this.detailsList[index].totalAmount= this.detailsList[index].quantity * this.List1.unitPrice
      if(this.detailsList[index].quantity==0){
        this.detailsList.splice(index,1);
      }
    },
    handleChange(value) {
      console.log(value);
    },
    handleMessage(Num){
      this.zizujian=Num
    },
    // 查询订单
    check(){
      var A=this.handbrandnumber;
      if(A.length==0){
          this.$modal.msgError("未输入手牌号");
      }else{
      this.$router.push({path:'/yuquangong/guihuan',query:{chuan:A}});}
    },
    /** 查询吧台账单列表 */
    getbataiList() {
      this.loading = true;
      this.resetbatai();
      this.batai.handBrand=this.$route.query.NUM
      console.log(this.batai.handBrand)
      listBills(this.batai).then(response => {
        this.billsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },/** 查询项目信息列表 */
    getprojectList() {
      this.loading = true;
      listProject(this.projectinformations).then(response => {
        this.goodsList = response.rows;
        this.getRow();
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询消费详细列表 */
    getdetailsList() {
      this.loading = true;
      listDetails(this.consumptiondetail).then(response => {
        this.detailsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询人员基础信息列表 */
    getpersonList() {
      this.loading = true;
      listBaseinfo(this.personinfo).then(response => {
        this.personList = response.rows;
        console.log( this.personList );
        console.log(this.personList[0].nickName);
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询手牌基础信息列表 */
    gethandList() {
      this.loading = true;
      this.hands.handBrand=this.handbrandnumber;
      gethands(this.hands.handBrand).then(response=>{
      })
      this.loading = false;
    },
    // 查询吧台表的参数
    resetbatai() {
      this.batai = {
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      }},
  //重置消费详细表
  reset() {
    this.form = {
      ID: null,
      userId: null,
      deptId: null,
      department: null,
      nickName: null,
      userName: null,
      post: null,
      handBrand: null,
      handCategory: null,
      handState: null,
      retentionStatus: null,
      mergeStatus: null,
      openingTime: null,
      drawTime: null,
      mergeHands: null,
      mergeBarBillsId: null,
      leaveTime: null,
      beforeLeave: null,
      beforeBarBillsId: null,
      entryName: null,
      projectCategory: null,
      projectCode: null,
      mnemonicCode: null,
      unit: null,
      unitPrice: null,
      commissionPrice: null,
      together: null,
      sailingsSigns: null,
      barBillsId: null,
      recordingTime: null,
      quantity: null,
      totalAmount: null,
      seat: null,
      orderNumber: null,
      paymentMethod: null,
      consumptionStatus: null,
      chargebackTime: null,
      reasonForChargeback: null,
      chargebackProcessorAccount: null,
      chargebackProcessorName: null,
      clockTime: null,
      nextClockTime: null,
      nextClockStatus: null,
      recordEmployeeNumber: null,
      recorderEmployeeName: null,
      roomType: null,
      openingHours: null,
      checkOutTime: null,
      checkOutStatus: null,
      note1: null,
      note2: null,
      note3: null,
      note4: null,
      note5: null,
      note6: null,
      note7: null,
      note8: null,
      note9: null,
      note10: null
    };
    this.resetForm("form");
  },

    reback(){
      //重置已点商品表单
      this.detailsList=[];
      //重置手牌表单
      this.getprojectList();
      this.$route.query.NUM='';
    },
    /** 添加商品不进库操作 */
    handleAdddetail(id) {
      this.hands.handBrand=this.handbrandnumber
      gethands(this.hands.handBrand).then(response => {
        getProject(id).then(response => {
          this.List1 = response.data;
          this.List1.handBrand = this.hands.handBrand;
          if (this.detailsList.length === 0) {
            this.detailsList.push({
              entryName: this.List1.entryName,
              handBrand: this.List1.handBrand,
              projectCategory: this.List1.projectCategory,
              quantity: 1,
              totalAmount: this.List1.unitPrice,
            })
          } else {
            for (let i = 0; i < this.detailsList.length; i++) {
              if (this.detailsList[i].entryName === this.List1.entryName) {
                this.detailsList[i].quantity = parseFloat(this.detailsList[i].quantity) + 1
                this.detailsList[i].totalAmount = this.detailsList[i].quantity * this.List1.unitPrice
                break
              } else {
                if (i === this.detailsList.length - 1) {
                  this.detailsList.push({
                    entryName: this.List1.entryName,
                    handBrand: this.List1.handBrand,
                    projectCategory: this.List1.projectCategory,
                    // handState: this.List1.handState,
                    quantity: 1,
                    totalAmount: this.List1.unitPrice,
                  })
                  i++
                }
              }
            }
          }
        })
      })
    },
    //将商品排放到左侧页面内
    getRow () {
      let arr = [];
      let row = Math.ceil(this.goodsList.length / 6);
      //  行循环
      for (let i = 0; i < row; i++) {
        //  第i行的商品
        arr[i] = [];
        // modLast：最后一行的商品个数
        let modLast = this.goodsList.length % 6 === 0 ? 6 : this.goodsList.length % 6;
        // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
        let lastRow = i === (row - 1) ? modLast : 6;
        //  列循环
        for (let j = 0; j < lastRow; j++) {
          arr[i][j] = this.goodsList[6 * i + j];
        }
      }
      //  最后得到arr数组，将数组赋值给一个变量
      this.branchData = arr;
    },
    /** 新增消费详细表*/
    addFormm1(){
      "drawer = true"
    },
    addFormm() {
      this.resetbatai();
      this.batai.handBrand=this.handbrandnumber
      listBills(this.batai).then(response => {
        this.billsList = response.rows;
        this.total = response.total;
      })
    .catch((err)=>{
        this.$modal.msgError("该手牌并未开牌");
        this.getprojectList();
      //重置已点商品表单
      this.detailsList=[];
      this.handbrandnumber='';
      });
      for(var k=0;k<this.detailsList.length;k++){
        this.detailsList[k].handState=this.billsList[0].handState;
      }
          if(this.detailsList.length>0){
          //批量插入
          for(var i=0;i<this.detailsList.length;i++){
            addDetails(this.detailsList[i]).then(response => {
            });
          }
          this.$modal.msgSuccess("租借成功");
            this.batai.handBrand=null;
            //重置已点商品表单
            this.detailsList=[];
            //重置手牌表单
            this.getprojectList();
            this.handbrandnumber='';
          //重置手牌表单
            this.batai=[];    // location.reload();

          }
          else
            this.$modal.msgError("未选择浴服");
          },

    },
}
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.allpage{
  /*position: fixed;*/
  margin-left: 5px;

}
/*.daxiao{*/
/*  width: 100%; !* 设置卡片宽度 *!*/
/*  height: 100px; !* 设置卡片高度 *!*/
/*}*/
/*.el-header{*/
/*  margin-left: 10px;*/
/*  margin-right: 10px;*/
/*  margin-top: 20px;*/
/*  margin-bottom: 5px;*/
/*}*/

.shaoboaside1 {
  margin-left: 10px;
  min-width: 50%;
  background: rgba(194,83,255,0);
}
.zhonglei{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

}
.shaomain {
  margin-right: 10px;
  margin-top: 15px;
  width: 100%;
  box-shadow: 0 100px 4px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.08);


}
.shaoboaside1,.shaomain{
  height: 1068px;
}
.position-fixed{
  position: inherit;
  margin-bottom: 5px;
  margin-top: 10px;
}
.listtable{
  margin-top: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  position: inherit;
  font-size: 18px;
}

.yupaoaa{
  margin-left: 20px;
  font-size: 25px;
  width: 100%;
}

.add_btn2{
  margin-left: 3px;
  margin-top: 9px;
  min-width: 160px;
  min-height: 80px;
  font-size: 20px;
  /*margin-top: -12px;*/
  /*margin-left: -20px;*/
  border: 3px solid #322d2d;
}
.add_btn4{
  min-width: 60px;
  min-height:208px;
  font-size: 25px;
  border: 5px solid #322d2d;
}
.first{
  margin-top: 30px;
  margin-left: 5px;
  /*margin-right: -10px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #ea0d0d;
  border-top:none;border-bottom:none;
}
.first1{
  margin-left: 5px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
}
.first2{
  margin-left: 5px;
  margin-top: 7px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #eab30d;
  border-top:none;border-bottom:none;
}
.first3{
  margin-left: 5px;
  margin-top: 7px;
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #74ea0d;
  border-top:none;border-bottom:none;
}
.buju{
  margin-top: 40px;
  width: 180px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.first4{
  margin-left: 5px;
  margin-top: 7px;
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #0deaab;
  border-top:none;border-bottom:none;
}
.juzhong{
  line-height:80px;
  font-size: 22px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.add_btn3{
  margin-top: 30px;
  min-width: 500px;
  min-height: 70px;
  right: 0px;
  font-size: 40px;

}
.button-list2 {
  text-align: center;
}
.shaoaside-content {
  display: flex; /* 设置弹性布局 */
}
.yupaozuoce{
  margin-top: 10px;
  margin-bottom: 20px;
}

.shaoaside-left, .shaoaside-right {
  display: inline-block; /* 将 div 元素设置为行内块级元素 */
  height: 200px;

  /*border: 1px solid #ccc;*/
}

.shaoaside-left {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: -23px;
}

.shaoaside-right {
  height: 400px;
  width: 24%;
  /*background-image: url("~a");*/
  /*background: #322d2d;*/
}
.card{
  width: 100%;
  height: 100%;
}
.fenlei{
  height: 100px;
  margin-right: -18px;
  text-align: center;
  font-size: 30px;
}

.yupaobutton1 {
  font-size: 20px;
  border: 3px solid #9c26b0;
}
.button5 {
  font-size: 22px;
  background-color: #ebd4ef;
  border: 3px solid #9c26b0;
}
.yupaoleibie{
  margin-top: 230px;
  margin-left:11px;
  font-size: 25px;
  width: 210px;
  height: 123px;
  border: 3px solid #322d2d;
}
.leibie4{
  margin-bottom: 20px;
  font-size: 25px;
  width: 160px;
  height: 100px;
  border: 3px solid #322d2d;
}
.shuru{
 margin-top: -3px;
}
.yupaoscroll {
  margin-right: 8px;
  height: 400px; /* 设置固定高度 */
  /*overflow-y: auto; !* 设置纵向滚动条 *!*/
  font-size: 25px;
  margin-top: 30px;

}
::-webkit-scrollbar{
  width: 0!important;
}
::-webkit-scrollbar{
  width: 0!important;height: 0;
}
  .num{
    position: relative;
    left: -350px;
    right: -100px;
    top: 0;
  }
  .m1{
    margin-left: 6px;
    margin-bottom: 20px;
  font-size: 20px;
  }
  .m{
    font-size: 20px;
  }
  .s{
    font-size: 18px;
  }
  .jishu{
    margin-left: 60px;
  }
 .input{
   margin-top: 22px;
   font-size: 20px;
 }
.el-dialog-div{
  height: 100vh;
  overflow: auto;
}
</style>

